import { useState } from "react";
import { Link as RouterLink, useNavigate } from "react-router-dom";
import {
  Button,
  Card,
  CardBody,
  CardHeader,
  Input,
  Checkbox,
} from "@heroui/react";

import AuthLayout from "@/layouts/auth";

export default function RegisterPage() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [termsAccepted, setTermsAccepted] = useState(false);
  const navigate = useNavigate();

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // Here you would typically handle the registration logic
    console.log("Registration attempt with:", { name, email, password, confirmPassword, termsAccepted });
    // For demo purposes, we'll just navigate to the home page
    navigate("/");
  };

  return (
    <AuthLayout>
      <div className="flex flex-col w-full max-w-md">
        <Card className="w-full">
          <CardHeader className="flex flex-col gap-2 items-center">
            <h1 className="text-2xl font-bold">Create Account</h1>
            <p className="text-default-500">Sign up to get started</p>
          </CardHeader>
          <CardBody>
            <form onSubmit={handleSubmit} className="flex flex-col gap-4">
              <Input
                isRequired
                label="Full Name"
                placeholder="Enter your full name"
                type="text"
                value={name}
                onChange={(e) => setName(e.target.value)}
              />
              <Input
                isRequired
                label="Email"
                placeholder="Enter your email"
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
              />
              <Input
                isRequired
                label="Password"
                placeholder="Create a password"
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
              />
              <Input
                isRequired
                label="Confirm Password"
                placeholder="Confirm your password"
                type="password"
                value={confirmPassword}
                onChange={(e) => setConfirmPassword(e.target.value)}
              />
              <Checkbox
                isRequired
                isSelected={termsAccepted}
                onValueChange={setTermsAccepted}
              >
                I agree to the Terms and Privacy Policy
              </Checkbox>
              <Button color="primary" type="submit">
                Sign Up
              </Button>
            </form>
            <div className="mt-6 text-center">
              <p className="text-default-500">
                Already have an account?{" "}
                <RouterLink className="text-primary" to="/login">
                  Sign In
                </RouterLink>
              </p>
            </div>
          </CardBody>
        </Card>
      </div>
    </AuthLayout>
  );
}